import { pagePriority } from '@/services/api/api-assess-week-culture-priority';
import { deletedRecord } from '@/services/api/api-assess-week-culture-record';
import { CloseCircleOutlined } from '@ant-design/icons';
import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
import { Button, message, Modal, Radio, RadioChangeEvent, Select, Space, Tag } from 'antd';
import Search from 'antd/es/input/Search';
import 'dayjs/locale/zh-cn';
import React, { useRef, useState } from 'react';
import { useAccess } from 'umi';
import DetailPriority from './DetailPriority';

interface TableRecordDisseminationPriorityPlatformProps {
  areaId: string;
  areaName: string;
  releaseTimes: Array<string>; //季度发布时间范围
  onRefurbish: () => void;
}

const TableRecordDisseminationPriorityPlatform: React.FC<
  TableRecordDisseminationPriorityPlatformProps
> = ({ areaId, areaName, releaseTimes, onRefurbish }) => {
  const access = useAccess();
  const actionRef = useRef<ActionType>();

  const [queryParams, setQueryParamsState] = useState<any>({ releaseTimes: releaseTimes });

  const columns: ProColumns<AssessWeekCulturePriorityData.PriorityPage>[] = [
    {
      title: '级别',
      key: 'datahubSourceName',
      dataIndex: 'datahubLevelName',
      align: 'center',
      width: '100px',
      render: (dom, record, _index, action) => {
        return (
          <Tag
            color={
              record?.datahubLevelId === '1000'
                ? 'error'
                : record?.datahubLevelId === '2000'
                ? 'warning'
                : 'success'
            }
          >
            {record?.datahubLevelName}
          </Tag>
        );
      },
    },

    {
      title: '来源名称',
      key: 'datahubSourceName',
      dataIndex: 'datahubSourceName',
      align: 'center',
      width: '100px',
      render: (dom, record, _index, action) => {
        return <Tag color="orange">{record?.datahubSourceName}</Tag>;
      },
    },
    {
      title: '标题',
      dataIndex: 'name',
      align: 'center',
      width: '280px',
      ellipsis: true,
      render: (dom, record, _index, action) => {
        return (
          <div
            style={{
              textAlign: 'left',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap',
              overflow: 'hidden',
            }}
          >
            <DetailPriority
              areaId={areaId}
              areaName={areaName}
              releaseTimes={releaseTimes}
              id={record.id}
              recordName={record.recordName}
              onRefurbish={function (): void {
                actionRef.current?.reload();
              }}
            />
          </div>
        );
      },
    },
    {
      title: '发布时间',
      key: 'releaseTime',
      dataIndex: 'releaseTime',
      valueType: 'date',
      width: '100px',
      align: 'center',
    },
    {
      title: '传播渠道',
      key: 'releaseTime',
      dataIndex: 'releaseTime',
      valueType: 'date',
      width: '200px',
      align: 'center',
      render: (dom, record, _index, action) => {
        return record?.channels?.map((item) => <Tag>{item.name}</Tag>);
      },
    },
    {
      title: '操作',
      key: 'option',
      valueType: 'option',
      width: '120px',
      align: 'center',
      render: (dom, record, _index, action) => [
        <a
          key="deleted"
          onClick={() => {
            Modal.confirm({
              title: '删除',
              icon: (
                <CloseCircleOutlined
                  style={{
                    color: '#FF4D4F',
                  }}
                />
              ),
              content: '删除后，该条报道所关联的区域将不参与评分计算',
              okText: `仅删除${areaName}`,
              okButtonProps: {
                style: {
                  background: 'orange',
                  color: 'white',
                },
              },
              footer: (_, { OkBtn, CancelBtn }) => (
                <>
                  <CancelBtn />
                  <OkBtn />
                  <Button
                    type="primary"
                    danger
                    hidden={!(access.文化报表x配置x管理员 && access.文化报表x考核)}
                    onClick={async () => {
                      const response = await deletedRecord({
                        id: record.id,
                      });

                      if (response.code == 0) {
                        message.success('已删除所有！');
                        actionRef.current?.reload();
                        Modal.destroyAll();
                      }
                    }}
                  >
                    删除所有区域
                  </Button>
                </>
              ),
              async onOk() {
                const response = await deletedRecord({
                  id: record.id,
                  areaId: areaId,
                });

                if (response.code == 0) {
                  message.success('已删除！');
                  actionRef.current?.reload();
                  Modal.destroyAll();
                }
              },
            });
          }}
        >
          删除
        </a>,
      ],
    },
  ];
  return (
    <>
      <ProTable<AssessWeekCulturePriorityData.PriorityPage>
        ghost
        headerTitle={
          <Space wrap>
            <Radio.Group
              buttonStyle="solid"
              defaultValue={'all'}
              onChange={(e: RadioChangeEvent) => {
                console.log('=====', e);

                const datahubLevelId = e.target.value;
                setQueryParamsState({
                  ...queryParams,
                  datahubLevelIds: datahubLevelId == 'all' ? ['1000', '2000'] : [e.target.value],
                });
                actionRef.current?.reloadAndRest();
              }}
            >
              <Radio.Button value="all">全部</Radio.Button>
              <Radio.Button value="1000">中央媒体</Radio.Button>
              <Radio.Button value="2000">市属媒体</Radio.Button>
            </Radio.Group>
          </Space>
        }
        columns={columns}
        request={async (params = {}) => {
          const response = await pagePriority({
            areaId: areaId,
            types: [1, 2],
            state: 1,
            ...queryParams,
            ...params,
          });
          return Promise.resolve({
            data: response.data.data,
            total: response.data.total,
            success: response.code === 0,
          });
        }}
        actionRef={actionRef}
        scroll={{
          x: '1000px',
        }}
        pagination={{
          defaultPageSize: 20,
          showSizeChanger: true,
        }}
        toolbar={{
          // search: {
          //   onSearch: (value: string) => {
          //     setQueryParamsState({
          //       ...queryParams,
          //       name: value,
          //     });
          //     actionRef.current?.reloadAndRest();
          //   },
          // },
          actions: [
            <Search
              placeholder="请输入标题"
              onSearch={(value) => {
                setQueryParamsState({
                  ...queryParams,
                  name: value,
                });
                actionRef.current?.reloadAndRest();
              }}
              style={{ width: 200 }}
            />,
          ],
        }}
        rowKey="id"
        search={false}
      />
    </>
  );
};
export default TableRecordDisseminationPriorityPlatform;
